<template>

  <div class="album">
    <!--歌曲-->
    <song-list class="album-body" :songList="currentSongList"></song-list>
  </div>

</template>

<script lang="ts">
import {defineComponent, ref,} from "vue";
import SongList from "@/components/SongList.vue";
import {HttpManager} from "@/api";

export default defineComponent({
  components: {
    SongList,
  },
  setup() {
    const currentSongList = ref([]); // 存放的音乐
    // 收集歌曲
    async function getSongAll() {
      const result = (await HttpManager.getSongAll()) as ResponseBody;
      currentSongList.value = result.data;
    }

    getSongAll()
    return {
      currentSongList,
      attachImageUrl: HttpManager.attachImageUrl,

    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";
@import "@/assets/css/global.scss";

// album 的样式
.album {
  max-width: 1200px; /* 设置最大宽度，以确保不会过宽 */
  margin: 0 auto; /* 居中对齐 */
}

// album-body 的样式
.album-body {
  background-color: $color-white; /* 背景色 */
  padding: 10px; /* 内边距 */

  overflow-x: auto; /* 如果内容超出，显示水平滚动条 */
}

// 设置歌曲列表的样式
.song-list {
  background-color: $color-white; /* 背景色 */
  padding: 10px; /* 内边距 */
}

// 表格的行高亮样式
.album-body:deep(.el-table__row.current-row) {
  color: $color-black; /* 高亮行的文字颜色 */
  font-weight: bold; /* 高亮行的文字加粗 */
}

// 表格的行样式
.album-body:deep(.el-table__row) {
  cursor: pointer; /* 鼠标悬停时显示指针 */
}

// 表格列的样式
.el-table-column {
  font-size: 0.9rem; /* 字体大小 */
  color: $color-text; /* 文字颜色 */
}
</style>
